import React, { Component } from 'react'
import { inject, observer } from 'mobx-react';
import { Table, Spin, Form, Row, Col, Input, Button, Dropdown, Menu, Icon, Popconfirm, message, Modal, Select, TreeSelect, Checkbox, Tabs, Tag, Popover, Upload, DatePicker } from 'antd'
import moment from 'moment'
import Edit from 'mixin/edit'
import { backUrl } from 'lib/fun'

const ButtonGroup = Button.Group;
const FormItem = Form.Item;
const SelectTreeNode = TreeSelect.TreeNode;
const CheckboxGroup = Checkbox.Group;
const Option = Select.Option;
const TabPane = Tabs.TabPane;
const Dragger = Upload.Dragger;

@Form.create()
@inject('appStore')
@observer
class ModuleName extends Edit {
  constructor(props) {
    super(props);
    this.state = Object.assign({
      listImg: '',
      coverImg: '',
      listImgVisible: false,
    }, this.state)
    this.api = {
      get: '/admin//get',
      save: '/admin/experience/save',
      upload: '/admin/uploadimage'
    }
    this.itemKey = 'experienceId';
    this.contentKey = 'content';
  }

  msgCallback = (result)=>{
    this.setState({
      listImg: result.listImg,
      coverImg: result.coverImg
    });
    this.um&&this.um.setContent(result[this.contentKey])
  }
  checkData = (values)=>{
    const { listImg, coverImg } = this.state;
    this.other = {
      img: listImg
    }
    return true;
  }
  reset = () => {
    this.setState({
      listImg: '',
      coverImg: ''
    });
  }

  handleChangeList = ({ fileList }) => {
    if(fileList&&fileList.length > 0&&fileList[fileList.length - 1].response){
      this.setState({
        listImg: fileList[fileList.length - 1].response.data[0]
      })
    }else{
      this.setState({
        listImg: ""
      })
    }
  }
  handleChangeCover = ({ fileList }) => {
    if(fileList&&fileList.length > 0&&fileList[fileList.length - 1].response){
      this.setState({
        coverImg: fileList[fileList.length - 1].response.data[0]
      })
    }else{
      this.setState({
        coverImg: ""
      })
    }
  }

  render() {
    const { visible, type } = this.props;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 14 },
    };
    const formItemLayout2 = {
      labelCol: { span: 12 },
      wrapperCol: { span: 12 },
    };
    const { msgData } = this.state;
    const { experienceTypeEn } = this.props.appStore.commonData;
    const uploadButton = (
      <div>
        <Icon type="plus" />
        <div className="ant-upload-text">上传</div>
      </div>
    );
    return (
      <Modal
        title={ type == 'edit'?"修改":"新建" }
        visible={visible}
        onOk={ this.handleCommit }
        onCancel={ this.onCancel }
        okText="确定"
        cancelText="取消"
        width="400px"
        maskClosable={false}
      >
        <Spin spinning={this.state.loading}>
          <Form>
            <Row>
              <Col span={24}>
                <FormItem {...formItemLayout} label="登录账号">
                  {getFieldDecorator("account",{
                    initialValue: type == 'edit'?msgData.account:"",
                  })(
                    <Input size="default"/>
                  )}
                </FormItem>
              </Col>
              <Col span={24}>
                <FormItem {...formItemLayout} label="登录密码">
                  {getFieldDecorator("pwd",{
                    initialValue: type == 'edit'?`${msgData.pwd}`:"",
                  })(
                    <Input size="default"/>
                  )}
                </FormItem>
              </Col>
              <Col span={24}>
                <FormItem {...formItemLayout} label="昵称">
                  {getFieldDecorator("nickname",{
                    initialValue: type == 'edit'?msgData.nickname:"",
                  })(
                    <Input size="default"/>
                  )}
                </FormItem>
              </Col>
              <Col span={24}>
                  <FormItem {...formItemLayout} label="手机号">
                    {getFieldDecorator("phone",{
                      initialValue: type == 'edit'?msgData.phone:"",
                    })(
                      <Input size="default"/>
                    )}
                  </FormItem>
              </Col>
              <Col span={24}>
                <FormItem {...formItemLayout} label="头像">
                  <div>
                    <Upload
                      action={backUrl(this.api.upload)}
                      onChange={this.handleChangeList}
                      showUploadList={false}
                    >
                      <Button><Icon type="upload" /> 上传</Button>
                    </Upload>
                  </div>
                  {this.state.listImg ? <div>
                      <img style={{marginTop: 10, maxHeight: 50}} src={`${imgBaseUrl}${this.state.listImg}`} alt=""/>
                    </div> : ""}
                </FormItem>
              </Col>
            </Row>
          </Form>
        </Spin>
      </Modal>
    )
  }
}

module.exports = ModuleName
